<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>廣安画卷</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {

            margin: 0;

            padding: 0;

            width: 100%;

            height: 100%;

        }

        img:hover {
            transition: all 500ms;
            transform: scale(1.1);
        }

        #logo #img0 {
            width: 380px;
            height: 50px;
            opacity: 0.9;
            position: fixed;
            top: 10px;
            left: 5px;
        }

        #png7 #xh_logo {
            width: 150px;
            height: 150px;
            opacity: 0.9;
            position: fixed;
            top: -15px;
            left: 349px;
        }

        #png8 #xh_logo2 {
            width: 90px;
            height: 90px;
            opacity: 0.9;
            position: fixed;
            top: 35px;
            left: 247px;
        }

        #png9 #xh_logo3 {
            width: 110px;
            height: 110px;
            opacity: 0.9;
            position: fixed;
            top: 55px;
            left: 299px;
        }

        #header {
            background-image: url("./imgs/VastLand.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            width: 16450px;
            height: 100%;
        }

        #header {
            position: relative;
        }

        #header .myimg {
            cursor: pointer;
            opacity: 0.7;
            border-radius: 20px;
        }

        #header #p1 {
            writing-mode: vertical-rl;
            word-break: keep-all;
            font-size: 70px;
            font-weight: bolder;
            font-family: "华文新魏";
            position: absolute;
            top: 20%;
            left: 280px;
        }

        #head2 #p2 {
            position: absolute;
            left: 700px;
            top: 10%;
            font-size: 27px;
            font-family: "华文新魏";
        }

        #head2 #img2 {
            width: 770px;
            height: 380px;
            position: relative;
            top: 400px;
            left: 700px;
        }

        #head3 {
            position: absolute;
            top: 3%;
            left: 1600px;
        }

        #head3 #p3 {
            writing-mode: vertical-rl;
            word-break: keep-all;
            font-size: 55px;
            font-family: "华文新魏";
        }

        #head4 {
            position: absolute;
            top: 4%;
            left: 1700px;
            width: 750px;

        }

        #head4 #img3 {
            width: 750px;
            height: 370px;
        }

        #head4 #img4 {
            width: 600px;
            height: 400px;
        }

        #head4 #p4 {
            text-align: center;
            margin: 0px;
            font-size: 25px;
            font-family: "华文楷体";
        }

        #head5 #img5 {
            width: 700px;
            height: 400px;
            position: absolute;
            top: 48%;
            left: 2460px;
        }

        #head6 #p6 {
            position: absolute;
            top: 4%;
            left: 3200px;
            writing-mode: vertical-rl;
            word-break: keep-all;
            font-size: 55px;
            font-family: "华文新魏";
        }

        #head7 #img7 {
            width: 800px;
            height: 370px;
            position: absolute;
            top: 12%;
            left: 3300px;
        }

        #head8 #img8 {
            width: 800px;
            height: 370px;
            position: absolute;
            top: 3%;
            left: 4300px;
        }

        #head9 #img9 {
            width: 600px;
            height: 720px;
            opacity: 0.9;
            border-radius: 20px;
            position: absolute;
            top: 3%;
            left: 10000px;
        }

        #head9 #p9 {
            position: absolute;
            top: 79%;
            left: 10000px;
            font-size: 24px;
            font-family: "华文新魏";
        }

        #head10 #p10 {
            position: absolute;
            top: 3%;
            left: 9800px;
            writing-mode: vertical-rl;
            word-break: keep-all;
            font-size: 55px;
            font-family: "华文新魏";
        }

        #head11 #img11 {
            width: 600px;
            height: 300px;
            opacity: 0.9;
            border-radius: 20px;
            position: absolute;
            top: 3%;
            left: 10800px;
        }

        #head11 #p11 {
            position: absolute;
            top: 36%;
            left: 10800px;
            font-size: 23px;
            font-family: "华文新魏";
        }

        #head12 #p12 {
            position: absolute;
            top: 4%;
            left: 11600px;
            writing-mode: vertical-rl;
            word-break: keep-all;
            font-size: 55px;
            font-family: "华文新魏";
        }

        #head13 #img13 {
            width: 500px;
            height: 280px;
            opacity: 0.8;
            border-radius: 20px;
            position: absolute;
            top: 18%;
            left: 11800px;
        }

        #head13 #p13 {
            position: absolute;
            top: 4%;
            left: 11800px;
            font-size: 23px;
            font-family: "华文新魏";
        }

        #head14 #img14 {
            width: 460px;
            height: 350px;
            opacity: 0.8;
            border-radius: 20px;
            position: absolute;
            top: 3%;
            left: 13100px;
        }

        #head14 #p14 {
            position: absolute;
            top: 40%;
            left: 13100px;
            font-size: 24px;
            font-family: "华文新魏";
        }

        #head15 #img15 {
            width: 370px;
            height: 200px;
            opacity: 0.9;
            border-radius: 20px;
            position: absolute;
            top: 55%;
            left: 12500px;
        }

        #head15 #p15 {
            position: absolute;
            top: 76%;
            left: 12500px;
            font-size: 25px;
            font-family: "华文新魏";
        }

        #head16 #p16 {
            position: absolute;
            top: 4%;
            left: 5300px;
            writing-mode: vertical-rl;
            word-break: keep-all;
            font-size: 55px;
            font-family: "华文新魏";
        }

        #head17 #img17 {
            width: 650px;
            height: 500px;
            opacity: 0.9;
            border-radius: 20px;
            position: absolute;
            top: 30%;
            left: 5500px;
        }

        #head18 #p18 {
            position: absolute;
            top: 5%;
            left: 5550px;
            font-size: 24px;
            font-family: "华文新魏";
        }

        #head19 #img19 {
            width: 650px;
            height: 500px;
            opacity: 0.8;
            border-radius: 20px;
            position: absolute;
            top: 40%;
            left: 6300px;
        }

        #head20 #img20 {
            width: 490px;
            height: 600px;
            opacity: 0.8;
            border-radius: 20px;
            position: absolute;
            top: 5%;
            left: 7100px;
        }

        #head21 #p21 {
            position: absolute;
            top: 4%;
            left: 7850px;
            writing-mode: vertical-rl;
            word-break: keep-all;
            font-size: 55px;
            font-family: "华文新魏";
        }

        #head22 #img22 {
            width: 650px;
            height: 500px;
            opacity: 0.8;
            border-radius: 20px;
            position: absolute;
            top: 2%;
            left: 8000px;
        }

        #head23 #img23 {
            width: 650px;
            height: 500px;
            opacity: 0.8;
            border-radius: 20px;
            position: absolute;
            top: 38%;
            left: 8800px;
        }

        #head24 #p24 {
            position: absolute;
            top: 11%;
            left: 8700px;
            font-size: 25px;
            font-family: "华文新魏";
        }

        #head25 #img25 {
            width: 500px;
            height: 300px;
            opacity: 0.9;
            border-radius: 20px;
            position: absolute;
            top: 15%;
            left: 13800px;
        }

        #head27 #img27 {
            width: 300px;
            height: 200px;
            opacity: 0.8;
            border-radius: 20px;
            position: absolute;
            top: 20%;
            left: 14350px;
        }

        #head26 #p26 {
            position: absolute;
            top: 9%;
            left: 13800px;
            font-size: 25px;
            font-family: "华文新魏";
        }

        #footer #p28 {
            position: absolute;
            top: 35%;
            left: 16300px;
            writing-mode: vertical-rl;
            word-break: keep-all;
            font-size: 55px;
            font-family: "华文楷体";
            color: blanchedalmond;
        }



        #png1 #png1 {
            width: 120px;
            height: 120px;
            opacity: 0.9;
            position: absolute;
            top: 79%;
            left: 3700px;
        }

        #png2 #png2 {
            width: 150px;
            height: 150px;
            opacity: 0.9;
            position: absolute;
            top: 43%;
            left: 2100px;
        }

        #png3 #png3 {
            width: 80px;
            height: 80px;
            opacity: 0.9;
            position: absolute;
            top: 76%;
            left: 11300px;
        }

        /* #yu #yu {
            width: 30px;
            height: 90px;
            opacity: 0.8;
            position: absolute;
            top: 85%;
            left: 3500px;
        } */

        #png4 #png4 {
            width: 90px;
            height: 150px;
            opacity: 0.9;
            position: absolute;
            top: 25%;
            left: 9550px;
        }

        #png5 #png5 {
            width: 150px;
            height: 150px;
            opacity: 1;
            position: absolute;
            top: 74%;
            left: 9500px;
        }

        #png6 #png6 {
            width: 350px;
            height: 160px;
            opacity: 0.9;
            position: absolute;
            top: 410px;
            left: 4500px;
        }

        #png10 #png10 {
            width: 150px;
            height: 250px;
            opacity: 0.9;
            position: absolute;
            top: 6%;
            left: 12500px;
        }

        #png11 #png11 {
            width: 180px;
            height: 110px;
            opacity: 0.9;
            position: absolute;
            top: 60%;
            left: 8150px;
        }

        #png12 #png12 {
            width: 180px;
            height: 110px;
            opacity: 0.9;
            position: absolute;
            top: 64%;
            left: 13400px;
        }

        #png13 #png13 {
            width: 180px;
            height: 185px;
            opacity: 0.9;
            position: absolute;
            top: 49%;
            left: 14700px;
        }

        #png14 #png14 {
            width: 400px;
            height: 300px;
            opacity: 0.9;
            position: absolute;
            top: 4%;
            left: 14630px;
        }

        #myaudio {
            position: fixed;
            bottom: 10px;
            z-index: 999;
            opacity: .6;
            right: 15px;
        }

        #myvideo {
            /* width: 1500px; */
            height: 100%;
            position: absolute;
            left: 14900px;
            opacity: 0.9;
        }
    </style>
    <script src="../js/jquery.js"></script>
    <script>
        $(function () {
            let playTimer; //播放时钟
            let scrollLeft = 0; //滚动位置
            let divWidth = $("#header").width();

            function startScroll() {
                // $(window).scrollTop(Y);

                let distance = 4; //移动的间隙

                // console.log("divWidth:" + divWidth);
                playTimer = setInterval(function () {
                    scrollLeft += distance;
                    // if (Math.ceil($(document).scrollLeft()) >= $(document).width() - $(window)
                    //     .width()) {
                    //     // alert("滚动条已经到达底部为" + $(document).scrollLeft());
                    //     scrollLeft = 0; //当触底后重新播放
                    // }
                    $(document).scrollLeft(scrollLeft)

                }, 5)
            }
            startScroll();
            // 监听滚动条位置
            $(window).scroll(function () {
                scrollLeft = Math.ceil($(document).scrollLeft());
            });
            $(window).click(function () {
                if (playTimer) {
                    //停止播放
                    clearInterval(playTimer);
                    playTimer = undefined; //停止滚动
                    $("#myaudio").get(0).pause();
                } else {
                    //启动播放
                    startScroll();
                    $("#myaudio").get(0).play();
                }
            });

        })

        $(window).scroll(function () {
            console.log($(window).scrollLeft());
            let left = $(window).scrollLeft()
            if (left >= 14300 && left <= 16000) {
                // let mp4 = document.querySelector('video');
                // mp4.play();
                $("video").get(0).play();
                $("#myaudio").get(0).pause();
            } else if (left >= 4 && left <= 14300) {
                // $("#myaudio").get(0).play();
                $("video").get(0).pause();
            }
        });
    </script>
</head>

<body>
    <audio controls loop src="./audios/cmss.mp3" id="myaudio" autoplay preload="auto">
    </audio>
    <div id="header">
        <video id="myvideo" src="./MP4/mbqs.mov" controls preload="auto"></video>
        <div>
            <p id="p1">滨江之城，川东门户</p>
        </div>
        <div id="logo">
            <img id=img0 src="./png/zhiyuan_logo(2).png">
        </div>
        <div id="head2">
            <p id="p2">
                <b>四川-广安</b>：地处中亚热带湿润季风气候区，四季分明，气候温暖，<br>雨量充沛，物产丰富。境内嘉陵江、渠江曲折回环汇入长江，<br>华蓥山、铜锣山、明月山平行分布于市境东部。历史悠久，<br>还拥有“伟人故里，滨江之城，川东门户，红色旅游胜地”<br>文化底蕴深厚，孕育了云童舞、岳池灯戏等独特民俗风情。
            </p>
            <img id=img2 class="myimg" src="./imgs/故里.jpeg " title="小平故里" />
        </div>
        <div id="head3">
            <p id="p3">
                <b>小平故居,天下广安</b>
            </p>;
        </div>
        <div id="head4">
            <p id="p4">
                <b>瞻仰小平故里,缅怀世纪伟人</b>
            </p>
            <img id=img3 class="myimg" src="./imgs/铜像.jpeg" title="小平故居" />
        </div>
        <div id="head5">
            <img id=img5 class="myimg" src="./imgs/小平故居.jpg" title="小平铜像" />
        </div>
        <div id="head6">
            <p id="p6">
                <b>渠江,广安之夜</b>
            </p>;
        </div>
        <div id="head7">
            <img id=img7 class="myimg" src="./imgs/滨江夜景.jpg" title="滨江夜景" />
        </div>
        <div id="head8">
            <img id=img8 class="myimg" src="./imgs/渠江-广安之夜.png" title="滨江夜景" />
        </div>
        <div id="head9">
            <p id=p9>
                <b>华蓥山</b>早在1927年就有中共地下党活动，三、四十年代，<br>这里曾是中共华蓥山地下党和华蓥山游击队从事武装<br>斗争的根据地。周恩来曾派人在此开办纸厂供应新华日报。<br>解放战争时期，这里是中共川东地下党领导的华蓥山游击队<br>战斗的地方。
            </p>
            <img id=img9 src="./imgs/双枪老太.png" title="双枪老太婆" />
        </div>
        <div id="head10">
            <p id="p10">
                <b>广安-华蓥山武装斗争的根据地</b>
            </p>;
        </div>
        <div id="head11">
            <img id=img11 src="./imgs/天池湖.png" title="天池" />
            <p id=p11>
                <b>华蓥山天池</b>，川东地区面积最大、海拔最高的高山湖泊，<br>素有”小西湖”之称，与天山天池、长白山天池<br>并称为全国三大天池。天池湖恰似一颗璀璀璨的明珠，<br>镶嵌在华蓥山，一年四季湖水清澈，绿水青山，<br>碧波荡漾，水天一色；
            </p>
        </div>
        <div id="head12">
            <p id="p12">
                <b>蜀味-人间百味</b>
            </p>;
        </div>
        <div id="head13">
            <p id=p13>
                <b>武胜渣渣鱼</b>，渣渣鱼想必应该有很多的人觉得，这不是<br>指一种鱼叫渣渣，其实并不是这样的，而是形容鱼小，<br>跟四川方言有关，可炸可烧可焖，可家常可麻辣，<br>是四川省广安市武胜县的著名菜品。
            </p>
            <img id=img13 src="./imgs/zhazhayu.png" title="渣渣鱼" />
        </div>
        <div id="head14">
            <img id=img14 src="./imgs/yanpidan.jpg" title="盐皮蛋" />
            <p id=p14>
                <b>邓家盐皮蛋</b>，起源于广安市协兴镇牌坊村<br>(邓小平出生地)，传统工艺已有一百多年的历史。<br>盐皮蛋是地道的广安土特产之一，怪就怪在它取盐蛋<br>和皮蛋的优点。既没有盐蛋那么咸、又没有皮蛋碱性那么大。
            </p>
        </div>
        <div id="head15">
            <img id=img15 src="./imgs/mifen.png" title="岳池米粉" />
        </div>
        <div id="head15">
            <p id=p15>
                <b>广安岳池米粉</b>距今有三百多年的历史，<br>自清康熙年间始，岳池人自制米粉主早食亦待客。
            </p>
        </div>
        <div id="head16">
            <p id="p16">
                <b>蜀-神龙山巴人石头城</b>
            </p>;
        </div>
        <div id="head17">
            <img id=img17 src="./imgs/巴人石头城.jpeg" title="巴人石头城" />
        </div>
        <div id="head18">
            <p id=p18>
                <b>巴人石头城</b>为古巴国通往秦蜀之间的要径，东指荆楚，南卫虎都，西连蜀汉，北望三秦，是巴国重要的门户之一。<br>该城由龙门关、土舟湖、龙台三部分构成，其人文历史又由巴人文化、龙泽寺宗教文化和28星宿天象文化三大部分组成。
                <br>充分体现了广安、川东渝北的历巴人石头城史，展现了巴人文化与宗教珠联璧合，演绎战争与和平的千古绝唱，<br>乃举世无双之历史文化遗产。
            </p>
        </div>
        <div id="head19">
            <img id=img19 src="./imgs/石头.jpeg" title="巴人石头城" />
        </div>
        <div id="head20">
            <img id=img20 src="./imgs/巴蜀.png" title="巴人石头城" />
        </div>
        <div id="head21">
            <p id="p21">
                <b>白塔凌云</b>
            </p>;
        </div>
        <div id="head22">
            <img id=img22 src="./imgs/广安白塔.jpg" title="白塔" />
        </div>
        <div id="head23">
            <img id=img23 src="./imgs/广安白塔.png" title="白塔" />
        </div>
        <div id="head24">
            <p id="p24">
                <b>广安白塔</b>又名"舍利"宝塔，南宋淳熙至嘉定（公元1174年~1224年）年间建。<br>位于广安市城南2公里渠江聋子滩侧，四方形，通高36.7米。塔身为砖石结构，<br>仿木楼阁式建筑，共9层。塔中空，层与层之间有阶梯，可登至塔顶。无塔刹，<br>顶部四方相通。临江一面有"如来须相，舍利宝塔"八字。塔与对面奎星塔遥遥相对，<br>"仰视远观，秀出云表"。
            </p>;
        </div>
        <div id="head25">
            <img id=img25 src="./imgs/龙安柚母.jpg" title="龙安柚" />
        </div>
        <div id="head26">
            <p id="p26">
                <b>龙安柚</b>，广安市特产，中国国家地理标志产品。
            </p>;
        </div>
        <div id="head27">
            <img id=img27 src="./imgs/龙安柚.png" title="龙安柚" />
        </div>
        <div id="footer">
            <p id="p28">
                <b>千里江山图</b>
            </p>;
        </div>


        <div id="png1">
            <img id="png1" src="./png/孤舟.png" />
        </div>
        <div id="png2">
            <img id="png2" src="./png/仙鹤.png" />
        </div>
        <div id="png3">
            <img id="png3" src="./png/仙鹤1.png" />
        </div>
        <!-- <div id="yu">
            <img id="yu" src="./png/锦鲤.png" />
        </div> -->
        <div id="png4">
            <img id="png4" src="./png/上青天1.png" />
        </div>
        <div id="png5">
            <img id="png5" src="./png/水墨船.png" />
        </div>
        <div id="png6">
            <img id="png6" src="./png/仙鹤群.png" />
        </div>
        <div id="png7">
            <img id="xh_logo" src="./png/仙鹤.png" />
        </div>
        <div id="png8">
            <img id="xh_logo2" src="./png/仙鹤.png" />
        </div>
        <div id="png9">
            <img id="xh_logo3" src="./png/仙鹤.png" />
        </div>
        <div id="png10">
            <img id="png10" src="./png/仙鹤飞天.png" />
        </div>
        <div id="png11">
            <img id="png11" src="./png/金仙鹤.png" />
        </div>
        <div id="png12">
            <img id="png12" src="./png/仙鹤2.png" />
        </div>
        <div id="png13">
            <img id="png13" src="./png/3地鹤.png" />
        </div>
        <div id="png14">
            <img id="png14" src="./png/上青天.png" />
        </div>
    </div>
</body>

</html>